/* 声明字体图标 */
@font-face {
    font-family: 'icomoon';
    src:  url('../fonts/icomoon.eot?tomleg');
    src:  url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),
      url('../fonts/icomoon.ttf?tomleg') format('truetype'),
      url('../fonts/icomoon.woff?tomleg') format('woff'),
      url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  @font-face {
    font-family: 'icomoon_2';
    src:  url('../fonts_2/icomoon.eot?tomleg');
    src:  url('../fonts_2/icomoon.eot?tomleg#iefix') format('embedded-opentype'),
      url('../fonts_2/icomoon.ttf?tomleg') format('truetype'),
      url('../fonts_2/icomoon.woff?tomleg') format('woff'),
      url('../fonts_2/icomoon.svg?tomleg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
// 首页less文件
@import 'common';
body {
    min-width: 320px;
    width: 15rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial,Helvetica;
    background: #f2f2f2;
}
* {
    margin: 0;
    padding: 0;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}
// @baseFont: 50rem;
// .search-content {
//     position: fixed;
//     top: 0;
//     left: 0;
//     width: 15rem;
//     height: 88rem / @baseFont;
//     background-color: #ffc001;
// }
@baseFont: 50;
.search-content {
    display: flex;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50.05%);
    width: 15rem;
    height: (88rem / @baseFont);
    background-color:#FFC001;
    .classify {
        width: (44rem / @baseFont);
        height: (70rem / @baseFont);
        background: url(../img/classify.png) no-repeat;
        // 背景缩放
        background-size: (44rem / @baseFont) (70rem / @baseFont);
        margin: (11rem / @baseFont) (25rem / @baseFont) (7rem / @baseFont) (24rem / @baseFont);
    }
    .search {
        flex: 1;
        input {
            outline: none;
            width: 100%;
            height: (66rem / @baseFont);
            border-radius: (33rem / @baseFont);
            background-color: #fff2cc;
            border: 0;
            margin-top: (12rem / @baseFont);
            font-size: (25rem / @baseFont);
            padding-left: (55rem / @baseFont);
            color: #757575;
        }
    }
    .login {
        width: (75rem / @baseFont);
        height:  (70rem / @baseFont);
        margin:  (10rem / @baseFont);
        font-size: (25rem / @baseFont);
        text-align: center;
        color: #fff;
        line-height: (70rem / @baseFont);
    }
}
.banner {
    width: (750rem / @baseFont);
    height: (368rem / @baseFont);
    img {
        width: 100%;
        height: 100%;
    }
}
.ad {
    display: flex;
    a {
        flex: 1;
        img {
            width: 100%;
        }
    }
}
nav {
    width: (750rem / @baseFont);
    padding: 0 0 10px 0;
    margin: 0 0 10px 0;
    border-radius: 10px;
    overflow: hidden;
    background-color: #fff;
    a {
        float: left;
        width: (150rem / @baseFont);
        height: ( 140rem / @baseFont);
        text-align: center;
        img {
            display: block;
            width: (82rem / @baseFont);
            margin: (10rem / @baseFont) auto 0;
        }
        span {
            font-size: (25rem / @baseFont);
            color: #333;
        }
    }
}
.commodity_active {
    padding: 0 .2667rem;
    background-color: #fff;
}
[class^=com2] {
    display: flex;
    position: relative;
    width: 15rem;
    height: 5.16rem;
    a {
        flex: 1;
        width: 100%;
        padding: .2rem;
        h6 {
            color: #333;
        }
    }
    p {
        font-size: .50rem;
        color: #ccc;
    }
}
// .com2_1 a:nth-child(1) {
//     background-color: aqua;
// }
// .com2_1 a:nth-child(2) {
//     background-color: skyblue;
// }
.com_img_1 {
    display: flex;
    position: absolute;
    top: 1.8667rem;
    width: 50%;
    margin-top: .2133rem;
    a {
        flex: 1;
        padding: 0 .6133rem;
        img {
            width: 100%;
        }
    }
}
.com_img_2 {
    display: flex;
    position: absolute;
    top: 1.8667rem;
    width: 50%;
    margin-top: .2133rem;
    right: 0;
    a {
        flex: 1;
        padding: 0 .6133rem;
        img {
            width: 100%;
        }
    }
}
.recommend {
    display: flex;
    margin-bottom: 2.1333rem;
    .recommend_op {
        flex: 1;
        margin: 0 .2667rem 0 0 ;
        border-radius: .22rem;
        overflow: hidden;
    }
}
.recommend .recommend_op:last-child {
    margin: 0;
}
.recommend .recommend_op .recommend_text {
    background-color: #D9A87A;
}
.recommend .recommend_op:nth-child(2) .recommend_text {
    background-color: #FB7F0A;
}
.recommed_a {
    display: block;
    height: 30px;
}
.recommed_a img {
    width: 100%;
    // padding: 0 .2667rem;
    transform: translateX(-0.2133rem);
}
.recommend_op {
    display: flex;
    height: 5.16rem;
    flex-direction:column;
    .recommend_img {
        flex: 2;
        background-color: #fff;
    }
    .recommend_text {
        flex: 1;
        position: relative;
        p {
            text-align: center;
        }
    }
}
.recommend_img a {
    display: block;
}
.recommend_img a img {
    display: block;
    width: 3rem;
    height: 3rem;
    margin: 0 auto;
    padding: .1rem .24rem;
}
.recommend_text p:nth-child(1) {
    font-size: .52rem;
    line-height: .64rem;
    color: #fff;
    margin: 0.62rem auto 0.06rem;
}
.recommend_text p:nth-child(2) {
    line-height: .48rem;
    font-size: .44rem;
    color: #fff;
    margin-bottom: .2667rem;
}
.re_text_div {
    height: 0.68rem;
    width: 2rem;
    position: absolute;
    font-size: .44rem;
    border: 0.04rem solid #D9A87A;
    border-radius: 0.34rem;
    padding: .01rem;
    margin: 0 auto;
    top: 0;
    left: 50%;
    text-align: center;
    transform: translate(-50%,-50%);
    background-color: #fff;
}
.bottom_option {
    width: 100%;
    display: flex;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    .option {
        flex: 1;
        height: 2rem;
        text-align: center;
    }
}
[class^=icon] {
    display: block;
    color: #666;
}
[class^=icon] p {
    font-size: 0.4rem;
    line-height: .64rem;
    margin-top: -0.1867rem;

}
.icon_1::before {
    content: '\e914';
    font-family: 'icomoon';
    font-size: .72rem;
}
.icon_2::before {
    content: '\e986';
    font-family: 'icomoon';
    font-size: .72rem;
}
.icon_3::before {
    content: '\e925';
    font-family: 'icomoon';
    font-size: .72rem;
}
.icon_4::before {
    content: '\e93a';
    font-family: 'icomoon';
    font-size: .72rem;
}
.icon_5::before {
    content: '\e90d';
    font-family: 'icomoon';
    font-size: .72rem;
}